<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/player.css">
</head>
<body>
<div>
    <div class="player">
        <div class="btn">
            <div id="pre"></div>
            <div id="pause"></div>
            <div id="next"></div>
        </div>
        <div class="progress-bar">
            <div id="holder"></div>
            <span id="start">00:02</span>
            <span id="end">04:30</span>

            <div id="handler"></div>
        </div>
    </div>
</div>
</body>
<script>

    window.onload = function () {
        let pre = document.getElementById("pre");
        let next = document.getElementById("next")
        let pause = document.getElementById("pause");
        let flag = true;
        let start = document.getElementById("start");
        // 设置进度条
        let handler = document.getElementById("handler");
        let holder = document.getElementById("holder");
        let player = function () {
            barChange(1);
        }
        let timer = setInterval(player, 1000);
        // 进度条快进
        pre.onclick = function () {
            clearInterval(timer);
            barChange(-5);
            timer = setInterval(player, 1000);
        }
        // 进度条后退
        next.onclick = function () {
            clearInterval(timer);
            barChange(5);
            timer = setInterval(player, 1000);
        }
        // TODO: 进度条拖拽
        let barDrag = function () {
        }

        // 设置音乐的暂停和继续播放效果
        pause.onclick = function () {
            flag = !flag;
            if (flag) {
                this.style.backgroundImage = 'url("../static/img/playing_btn_pause.png")';
                timer = setInterval(player, 1000);
            } else {
                this.style.backgroundImage = 'url("../static/img/playing_btn_play_h.png")';
                clearInterval(timer);
            }
        }


        let barChange = function (crossTime) {
            let times = start.innerText.split(":");
            if (flag) {
                handler.style.left = (handler.offsetLeft + crossTime) + "px";
                holder.style.width = handler.offsetLeft + "px";
                // 设置时间的显示
                if (parseInt(times[1]) > 59) {
                    times[0] = parseInt(times[0]) > 8 ? parseInt(times[0]) + 1 : "0" + (parseInt(times[0]) + 1)
                    times[1] = "00";
                } else {
                    times[1] = parseInt(times[1]) + crossTime > 8 ? parseInt(times[1]) + crossTime : "0" + (parseInt(times[1]) + crossTime);
                }
            }
            if (handler.offsetLeft > 290 || handler.offsetLeft <= 0) {
                // 当音乐进度条走完后, 做清除和初始化工作
                pause.click();
                handler.style.left = "0px";
                times[0] = "00";
                times[1] = "00";
                holder.style.width = "0";
                clearInterval(timer);
            }
            start.innerText = times.join(":");

        }
    }
</script>
</html>
